<script setup lang="ts">
import {useUserViewStore} from "@/store/views/sys/admin/userStore";
import {storeToRefs} from "pinia";
import {setRoleIdsApi} from "@/api/sys/admin/user";

const store = useUserViewStore()
const {setSetRolesVisible} = store
const {setRolesVisible, setRolesForm, statusOptions, roleOptions,formData} = storeToRefs(store)
const loading = ref(false)

// 提交修改密码
async function submitSetRoles() {
  loading.value = true
  setRoleIdsApi(setRolesForm.value).then(() =>{
    setSetRolesVisible(false)
    ElMessage.success('分配角色成功')
  }).finally(() =>{
    loading.value = false
  })
}

</script>

<template>
  <!--  弹出框: 选择角色-->
  <el-dialog draggable destroy-on-close v-model="setRolesVisible" :title="`选择用户${formData.nickname}的角色`"
             width="600" >
    <el-select
        v-model="setRolesForm.roleIds"
        multiple
        placeholder="请选择角色"
        style="width: 100%;"
    >
      <el-option
          v-for="item in roleOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id"
      >
        <span class="mr-4">{{ item.name }}</span>
        <x-tag :value="item.status" effect="plain" :options="statusOptions"/>
      </el-option>
    </el-select>
    <div class="h-24em"></div>
    <template #footer>
      <span>
        <el-button @click="setSetRolesVisible(false)">取消</el-button>
        <el-button type="primary" @click="submitSetRoles()" :loading="loading">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>